page {
  color: #222222;
  background-color: #ededed;
  font-size: $uni-font-size-md;
}

/** background color **/
.bg-primary {
  background-color: $uni-color-primary;
}
.bg-white {
  background-color: white;
}

/** text color **/
.text-color-placeholder {
  color: $uni-text-color-placeholder;
}

/** text align **/
.text-center {
  text-align: center;
}
.text-left {
  text-align: center;
}
.text-right {
  text-align: center;
}

/** font-size **/
.font-size-xs {
  font-size: $uni-font-size-xs;
}
.font-size-sm {
  font-size: $uni-font-size-sm;
}
.font-size-md {
  font-size: $uni-font-size-md;
}
.font-size-lg {
  font-size: $uni-font-size-lg;
}
.font-size-xl {
  font-size: $uni-font-size-xl;
}

/** border-radius **/
.border-radius-sm {
  border-radius: 10rpx;
}
.border-radius-md {
  border-radius: 30rpx;
}
.border-radius-lg {
  border-radius: 60rpx;
}

/** padding **/
.padding-xs {
  padding: 10rpx;
}
.padding-sm {
  padding: 20rpx;
}
.padding-md {
  padding: 40rpx;
}
.padding-lg {
  padding: 60rpx;
}

/** margin **/
.margin-xs {
  margin: 10rpx;
}
.margin-sm {
  margin: 20rpx;
}
.margin-md {
  margin: 40rpx;
}
.margin-lg {
  margin: 60rpx;
}
.-margin-xs {
  margin: -10rpx;
}

.pos-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.overflow-hidden {
  overflow: hidden;
}
